import React from "react"
import {NavLink } from "react-router-dom"
import { Carousel } from 'antd';
import $ from 'jquery';
import "./../scss/Home.scss"
import "./../md/iscroll.js";
import "./../md/touch.min.js";
class Home extends React.Component {
	constructor(props){
		super(props);
		this.state ={
			banner :[],
			nav:[],
			move:[],
			banner1:[],
			detail:[],
			page:1
		}
	}
	
	componentDidMount(){
		var footer = document.getElementById("footer");
		footer.style.display = "block";
		var that = this;
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/brand/ad/v3?zoneId=943%2C478%2C496%2C693%2C724%2C725%2C726%2C727%2C728&resolution=375x667&appName=lefeng_android&version=4.1.1",
			success:function(data){
				that.setState({banner:data.data[478]})
				that.setState({nav:data.data[496]})
				that.setState({move:data.data[724]})
				that.setState({banner1:data.data[478]})
			}
		});
//		品牌专场
		$.ajax({
			type:"get",
			url:"http://w.lefeng.com/api/neptune/special_brands/v3?page=1&labelType=1",
			success:function(data1){
//				console.log(data1.data)
				that.setState({detail:data1.data})
			}
		});
		var detail = document.getElementById("detail")
		var iscroll = new IScroll(detail,{
//			mouseWheel: true,
//			scrollbars: true,
//			passive: true,
			click:true
		});
		$('#top1').on('click', function(){
			iscroll.scrollTo(0,0,1000)
		})
		$(document).on('touchend',function(){
			if(iscroll.y > 50){
//				alert(1)
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/special_brands/v3?page=1&labelType=1",
					success:function(data){
						console.log(data.data)
						var arr = data.data;
						$("#detail ul").html('');
						arr.map(function(v){
							$("#detail ul").append("<li><a href=#/product/"+v.bid+"><div  class='dbox'><img src="+v.brandImage+" /><p class='pirse'>"+v.pms+"</p><div class='title1'><span>"+v.agio+"</span><b>"+v.name+"</b></div></div></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
			if(iscroll.y < iscroll.maxScrollY-50){
				that.setState({page:that.state.page+1})
				$.ajax({
					type:"get",
					url:"http://w.lefeng.com/api/neptune/special_brands/v3?page="+that.state.page+"&labelType=1",
					success:function(data){
						var arr = data.data;
						arr.map(function(v){
							$("#detail ul").append("<li><a href=#/product/"+v.bid+"><div  class='dbox'><img src="+v.brandImage+" /><p class='pirse'>"+v.pms+"</p><div class='title1'><span>"+v.agio+"</span><b>"+v.name+"</b></div></div></a></li>")
							iscroll.refresh();
						})
					}
				});
			}
		})
		setInterval(function(){
			iscroll.refresh();
		},1000)
	}
	
	
	
	render() {
		var ban   = [];
		var oNav  = [];
		var tMove = [];
		var ban1  = [];
		var detail= [];
		this.state.banner.map(function(n){
			ban.push(<div key={n.bannerId}><h3><img src={n.filename} /></h3></div>)
		})
		
		this.state.nav.map(function(m){
			oNav.push(<p key={m.bannerId}><img src={m.filename} /></p>)
		})
		
		this.state.move.map(function(f){
			var goodsId = f.adlink.split("?")[1].split("=")[1];
			tMove.push(<NavLink to={`/brand/${goodsId}`} key={f.bannerId}><img src={f.filename} /></NavLink>)
		})
		
		this.state.banner1.map(function(v){
			ban1.push(<div key={v.bannerId}><img src={v.filename} /></div>)
		})
		
		this.state.detail.map(function(s){
			detail.push(<li key={s.bid}><NavLink to={`/product/${s.bid}`}><div  className="dbox"><img src={s.brandImage} /><p className="pirse">{s.pms}</p><div className="title1"><span>{s.agio}</span><b>{s.name}</b></div></div></NavLink></li>)
		})
		
		
		
		
		
		
		
		
		
		
		return (
		<div id="homeContent">
			<div id="move">
				<Carousel autoplay>
				    {ban}
				  </Carousel>
			</div>
			<div id ="nav">
				{oNav}
			</div>
			<div className="newperson">
				<img src="./../img/newperson.jpg" />
				<img src="./../img/1.jpg" />
				<img src="./../img/2.gif" />
				<img src="./../img/3.jpg" />
				<img src="./../img/4.jpg" />
				<img src="./../img/5.jpg" />
				<img src="./../img/6.gif" />
				<img src="./../img/7.jpg" />
				<img src="./../img/8.jpg" />
				<img src="./../img/9.jpg" />
				<img src="./../img/11.jpg" />
				<img src="./../img/10.jpg" />
			</div>
			<div id="Tmove">
				<div className='tBox'>
				 {tMove}
				 </div>
			</div>
			<section>
				{ban1}
			</section>
			<h3 className="title">·品牌专场·</h3>
			<div id="detail"><ul>{detail}</ul></div>
			<NavLink id="cart" className="iconfont icon-gouwuchekong" to="/cart"></NavLink>
			<span id="top1" className="iconfont icon-shang"></span>
		</div>
		)
	}
}
export default Home;